<template>
  <view>
    <view class="tab-list">
				<view :class="['tab', activeIndex === index ? 'active-tab' : '']" v-for="(item, index) in tabData" :key="index"
        @click="handleClick(item,index)">
					{{ item.name }}</view>
			</view>
  </view>
</template>

<script>
export default {
  name:'tabIndex',
  data() {
    return {
      // tabData:[],
      tabData: [
				{
					name: '当日',
          value:1
				},
				{
					name: '昨日',
          value:2
				},
				{
					name: '当月',
          value:3
				},
				{
					name: '上月',
          value:4
				}
			],
      active: '',
      // activeIndex:0
    }
  },
  props: {
      activeName: {
        type: [Number, String],
        default: ''
      },
      // fontSize:{
      //   type: String,
      //   default: 14
      // },
      tabsList: {
        type: Array,
        default: []
      },
      activeIndex: {
        type: Number,
        default: 0,
      }
    },
    computed: {
    },
    // watch: {
    //   activeName: {
    //     handler(newVal, oldVal) {
    //       this.active = newVal
    //     },
    //     deep: true
    //   },
    //   tabsList: {
    //     handler(newVal, oldVal) {
    //       this.tabData = [...newVal]
    //       // this.getActive()
    //     },
    //     deep: true
    //   }
    // },
    // created() {
    //   this.tabsListConfig = this.$utils.deepClone(this.tabsList)
    //   this.active = this.activeName
    // },
    methods: {
      handleClick(item,index) {
        
        this.$emit('tabClick', item,index)
      }
    }

}
</script>

<style lang="scss" scoped>
.tab-list {
	display: flex;

	.tab {
		width: 110rpx;
		height: 60rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #C27E15;
		line-height: 60rpx;
		border-radius: 14rpx;
		border: 2rpx solid #C27E15;
		margin-right: 16rpx;
		text-align: center;
	}

	.active-tab {
		background-color: #C27E15;
		color: #fff;
	}
}

</style>